<template>
  <div class="upload-file">
    <div class="steps_container">
      <el-steps :active="activeStep">
        <el-step title="确定数据产品类型" description="请选择本次数据包的产品类型"></el-step>
        <el-step title="数据包上传" description="请上传.zip格式的数据包(请勿超出15G/15360MB)"></el-step>
        <!-- <el-step title="等待数据包初始化" description="数据包上传至服务器"></el-step> -->
      </el-steps>
    </div>
    <!-- 动态组件，根据当前步骤显示不同的内容 -->
    <!-- <component :is="currentComponent"></component> -->
    <Step1 ref="step1" :releaseInfo="formData" @send="getChildData" v-if="activeStep + 1 == 1" />
    <Step2 ref="step2" :releaseInfo="formData" @send="getChildData" v-if="activeStep + 1 == 2" />
    <Step3 ref="step3" :releaseInfo="formData" @send="getChildData" v-if="activeStep + 1 == 3" />
    <!-- 操作按钮 -->
    <div class="steps-action">
      <el-button v-if="activeStep > 0" @click="prev">上一步</el-button>
      <el-button v-if="activeStep < steps.length - 1" type="primary"
        class="next-buuton next-button-green next-buuton-primary" @click="next">下一步</el-button>
      <el-button v-if="activeStep === steps.length - 1" type="success" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import Step1 from './step1.vue';
import Step2 from './step2.vue';
// import Step3 from './step3.vue';
import { dataPackageAnalysis } from "@/api/product/productInfo";

export default {
  components: {
    Step1,
    Step2,
  },
  data() {
    return {
      formData: {},
      activeStep: 0, // 当前激活的步骤索引
      steps: [Step1, Step2] // 步骤对应的组件数组
    };
  },
  computed: {
    currentComponent() {
      // 返回当前步骤对应的组件
      return this.steps[this.activeStep];
    }
  },
  methods: {
    // 组装子组件数据
    getChildData(childData) {
      this.formData = Object.assign(this.formData, childData)
      console.log('this.formData', this.formData);
    },
    next() {
      // if (this.activeStep < this.steps.length - 1) {
      //   this.activeStep++;
      // }

      // console.log('this.', this.$refs[`step${this.activeStep + 1}`]);
      console.log('this.', this.$refs['step1']);
      const isNext = this.$refs[`step${this.activeStep + 1}`].handleEmitData()
      console.log('isNext', isNext);
      if (!isNext) {
        return
      }
      console.log('isNext', isNext);
      if (this.activeStep < this.steps.length - 1) {
        this.activeStep++;
      }
    },
    prev() {
      if (this.activeStep > 0) {
        this.activeStep--;
      }
    },
    submit() {
      const isNext = this.$refs[`step${this.activeStep + 1}`].handleEmitData()
      if (!isNext) {
        return
      }
      this.$confirm(
        '是否提交以上文件解析?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        const uploadFileList = this.formData.uploadFileList
        const countFileSize = uploadFileList.reduce((a, b) => a.dataSize + b.dataSize)
        let count = 0
        for (let index = 0; index < uploadFileList.length; index++) {
          const element = uploadFileList[index];
          const productName = this.formData.productName;
          const parmas = {
            fileName: element.name,
            filePath: element.imgUrl,
            // dataSize: uploadFileList.length,
            dataSize: countFileSize.dataSize,
            productType: this.formData.productType,
            productName
          }
          dataPackageAnalysis(parmas).then(res => {
            count++
            if (count == uploadFileList.length) {
              this.$confirm(
                '文件已上传完毕,是否前往查看?',
                "警告",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              ).then(() => {
                this.$router.push('/dataUpload/list')
              })
            }
          })
        }

      })

      // this.activeStep++;
      // 提交逻辑
      console.log('提交表单');
    }
  }
};
</script>

<style scoped lang="scss">
.steps-action {
  margin-top: 20px;
  text-align: center;
}

.upload-file {
  position: relative;
  padding: 20px;

  .upload {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 600px;
    border: 1px solid #dadada;
    margin: 20px;

    .upload-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;

      .search-icon {
        display: block;
        font-size: 120px;
        color: #16baaa;
      }

      .upload-button {
        border-color: #16baaa;
        background: #16baaa;
        font-size: 20px;
      }
    }
  }
}

.steps_container {
  width: 80%;
  margin: 0 auto;
}

.upload-file-uploader {
  bottom: -50px;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 1750px;
  height: 280px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}

.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}

.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}

.next-button {
  display: inline-block;
  vertical-align: middle;
  height: 38px;
  line-height: 38px;
  border: 1px solid transparent;
  padding: 0 18px;
  margin-left: 1575px;
  background-color: #16baaa;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
}
</style>